<template>
    <main>
        <div class="mark-top"></div>
        <div class="page-title">
            <Icon :name="pageConf.titleIcon" size="32px" />
            {{ pageConf.title }}
        </div>
        <div class="container">
            




        </div>



    </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Icon, Button, Uploader, showNotify, Field, CellGroup, Form as VanForm } from "vant";
import InfoCard from "@/components/InfoCard.vue"
import CountDown from "@/components/CountDown.vue"
import CopyLine from "@/components/CopyLine.vue";

const pageConf = ref({
    title: '此处为页面标题',
    titleIcon: 'alipay',
    price: 299.00,
    orderNo: 'P541684986416541684984',
    countdown: 30 * 60 * 60, // 传入过期倒计时,
    qrcode: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    modal: {
        title: '我是弹窗标题',
        content: '我是弹窗内容',
        fields: [
            {
                filedName: 'name',
                label: '姓名',
                value: '张三',
                placeholder: '请输入姓名',
                required: true,
                rules: [{ required: true, message: '请填写姓名' }]
            },
            {
                filedName: 'phone',
                label: '手机号',
                value: '13800000000',
                placeholder: '请输入手机号',
            }
        ],
    },
    charactersTxt: '我是文字',
    videoSrc: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    payOutTitle: 'qweqweq',
    payOutContext: 'qweqwe16541684684',
    payOutButton: '6541649684984',
    paySuccessTitle: '8964984',
    paySuccessContext: '654164968498'
})

const fileList = ref([])

function onCopy(content: string | number) {
    navigator.clipboard.writeText(String(content)).then(() => {
        // 复制成功
        showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
        // 复制失败
        showNotify({ type: 'danger', message: '复制失败' })
    })
}

function onRead(files) {
    console.log(files)
}
</script>

<style scoped lang="less">
.mark-top {
    width: 100%;
    height: 120px;
    background-color: rgb(84, 188, 189);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.page-title {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.container {
    margin-top: 8px;
    padding: 8px;

    .header-tpl {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f50;
        font-weight: bold;
        font-size: 30px;
    }

    .content-tpl {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;

        >div::before {
            content: ' * ';
            color: #f50;
        }
    }
}
</style>